<template>
  <div>
    <el-table
      border
      :data="tableData"
      style="width: 100%">
     <el-table-column
       width="106"
       type="index"
       label="序号"
       align="center">
     </el-table-column>
     <el-table-column
       min-width="106"
       prop="account"
       label="登录账号"
       align="center">
     </el-table-column>
      <el-table-column
        min-width="106"
        prop="name"
        label="姓名"
        align="center">
      </el-table-column>
      <el-table-column
        min-width="106"
        prop="roleName"
        label="角色"
        align="center">
      </el-table-column>
      <el-table-column
        min-width="106"
        prop="description"
        label="备注"
        align="center">
      </el-table-column>
      <el-table-column
        min-width="156"
        prop="lastLoginTime"
        label="最后登录时间"
        align="center">
      </el-table-column>
      <el-table-column
        align="center"
        min-width="200"
        label="操作">
         <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
      </el-table-column>
    </el-table>
    <div class="pagetbnBox">
      <div class="lipagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
            :page-size="10"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="total" hide-on-single-page>
          </el-pagination>
      </div>
    </div>
    <!--  弹框 编辑-->
    <div class="newadddcmd">
      <el-dialog  title="编辑账号" top="200px" id="addRole"  :visible.sync="editShow">
        <el-form :rules="rules" ref="form" label-position="left" :model="form">
          <el-form-item label="员工角色" label-width="80px">
            <el-select style="width: 86%;" v-model.trim="form.roleId" placeholder="请选择员工角色">
              <el-option v-for="(item, index) in form.roleArray"  :label="item.roleName" :value="item.roleId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名" prop="roleName" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model.trim="form.roleName" ></el-input>
          </el-form-item>
          <el-form-item prop="account" label="登入账号" label-width="80px">
            <el-input  minlength="1" maxlength="40" style="width: 86%;" v-model.trim="form.account" ></el-input>
          </el-form-item>
          <el-form-item  prop="password"  label="登入密码" label-width="80px">
            <el-input minlength="6"  @focus="handFocus" maxlength="40" type="password"  style="width: 86%;" v-model.trim="form.password"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model.trim="form.adress" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注说明" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model.trim="form.description" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="账户状态" label-width="80px">
            <el-select style="width: 86%;" v-model.trim="form.status" placeholder="请选择账户状态">
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancleBtn" @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="handSure">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from 'request'
import ycCancelButton from '@/components/cancelButton.vue'
import ycButton from '@/components/button.vue'
export default {
  name: 'roleTable',
  components: {
    ycCancelButton,
    ycButton
  },
  props: {
    total: '',
    tableData: {
      type: Array
    }
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('员工姓名不能为空'))
      } else {
        callback()
      }
    }
    var checkAccount = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('登入账号不为空'))
      }
      var re = /^1\d{10}$/
      if (re.test(value)) {
        callback()
        return true
      } else {
        return callback(new Error('请输入手机号码'))
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登入密码不为空'))
      }
      if (value.length < 6 || value.length > 40) {
        return callback(new Error('密码长度大于6小于40'))
      } else {
        callback()
      }
    }
    return {
      editShow: false,
      currentPage: '',
      form: {
        roleArray: [],
        roleId: '',
        roleName: '',
        account: '',
        password: '',
        adress: '',
        description: '',
        status: '',
        memberId: ''
      },
      rules: {
        roleName: [
          {required: true, validator: checkName, trigger: 'change'}
        ],
        account: [
          {required: true, validator: checkAccount, trigger: 'change'}
        ],
        password: [
          {required: true, validator: checkPassword, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    handFocus () {
      this.form.password = ''
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.$parent.init(val)
    },
    handleSizeChange (val) {
      this.$parent.init(val)
    },
    handleEdit (index, row) {
      this.editShow = true
      this.form.memberId = row.memberId
      request.userRoles().then(res => {
        this.form.roleArray = res
      })
      request.getBrokerById(row.memberId).then(res => {
        this.form.roleId = res.roleId
        this.form.roleName = res.name
        this.form.account = res.account
        this.form.password = res.pwd
        this.form.adress = res.addr
        this.form.description = res.description
        this.form.status = res.status.toString()
      })
    },
    handSure () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var data = {
            account: this.form.account,
            addr: this.form.adress,
            description: this.form.description,
            memberId: this.form.memberId,
            name: this.form.roleName,
            openId: '',
            parentType: 0,
            pwd: this.form.password,
            roleId: this.form.roleId,
            status: this.form.status
          }
          console.log(data)
          request.updateBroker(data).then(res => {
            if (res) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              setTimeout(() => {
                this.$parent.init(this.currentPage)
                this.editShow = false
              }, 500)
            }
          }).catch(e => {
            this.$message.error('修改失败')
          })
          return true
        } else {
          return false
        }
      })
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.deleteBrokerById(row.memberId).then(res => {
          if (res) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            if (index === 0) {
              this.currentPage--
            }
            setTimeout(() => {
              this.$parent.init(this.currentPage)
            }, 500)
          }
        }).catch(res => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.currentPage = Number(localStorage.getItem('acccountManageCurrentPage')) || 1
    this.$parent.init(this.currentPage)
  },
  beforeUpdate () {
    localStorage.setItem('acccountManageCurrentPage', this.currentPage)
  }
}
</script>

<style lang="stylus" scoped>
.block{
  float right
  padding 20px 0 0 0
}
</style>
